<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: hotpink;
            position: absolute;
            margin: 0 ;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //## 1.完善拖拽
        // +   让光标在box的中间位置
        // +   盒子边界值的判断（box只能在可是窗口移动）
    var box = document.querySelector('#box')
    // 窗口宽度减去盒子宽度 拿到最大宽度
    var maxLeft = window.innerWidth - box.offsetWidth
    var maxTop = window.innerHeight - box.offsetHeight
    console.log(maxTop)
    box.onmousedown = function(){
        
        window.onmousemove = function(e){
            // 兼容
            e = e || window.event
            // 宽高减50把盒子移动光标中间
             _clientX = e.clientX - 50
            _clientY = e.clientY - 50
            box.style.left =  _clientX + 'px'
            box.style.top =   _clientY + 'px'
            // 如果移动盒子的宽度大于最大宽度，强制等于最大宽度
            if(_clientX > maxLeft){
                box.style.left = maxLeft + 'px'
                 // 如果移动盒子的宽度小于最小宽度，强制等于最小宽度
            }else if(_clientX < 0){
                box.style.left = 0 + 'px'
            }
            if(_clientY  > maxTop){
                box.style.top = maxTop + 'px'
            }else if(_clientY < 0){
                box.style.top = 0 + 'px'
            }
        }
    }
    box.onmouseup = function(e){
        window.onmousemove = null
    }
   
    </script>
</body>
</html>